<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<script type="text/javascript" src="js/form.js"></script>
<style type="text/css">
	.wenzi{
		display: inline-block;
		width: 160px;
		height: 25px;
		background-color: #80817b;
		margin-top: 5px;
		margin-left: 12px;
	}
</style>
</head>
<body>
  <h2 >表单</h2>
  <form id="form" name="form1" >
    <table border="1" width="630" cellpadding="5" cellspacing="0">
     <tr><td>用户名</td><td><input type="text" name="username" placeholder="请输入用户名"/><span class="wenzi" >校验用户名是否合法</span></td></tr>
      <tr><td>密 码</td><td><input type="password" name="psw1" placeholder="请输入密码" /></td></tr>
      <tr><td>确认密码</td><td><input type="password" name="psw2" placeholder="请再次输入密码" /></td></tr>
      <tr><td>性 别</td><td>
         <input type="radio" name="gender" value="男">男
          <input type="radio" name="gender" value="女">女
      </td></tr>
      <tr><td>爱好</td><td>
         <input type="checkbox" name="hobby" value="篮球">篮球
         <input type="checkbox" name="hobby" value="跑步">跑步
         <input type="checkbox" name="hobby" value="游泳">游泳
      </td></tr>
     
      <tr><td>专业</td><td><select name="degree">
         
         <option>软件技术</option>
			<option>计算机</option>
      </select></td></tr>
      <tr><td>个人简介</td><td><textarea name="info" rows="6" cols="45"></textarea>
       </td></tr>
        <tr><td>头像</td><td><input type="file" /></td></tr>
      <tr><td colspan="2" align="center">
         <input type="button" value="提交" id="regBtn">
         <input type="reset" value="重 置">
      </td></tr>
    </table>
  </form>
</body>
<script>window.onload = function(){
     var sex,selDegree,infor;
     var hobbys = new Array(); 
     var fr = document.form1;
     fr.username.focus();
     var oBtn = document.getElementById('regBtn');
     oBtn.onclick = function(){
       if(fr.gender[0].checked == true){
           sex = "男";
       }
      else  if(fr.gender[1].checked == true){
           sex = "女";
      } 
       for(var i = 0; i < 3; i++){
         if(fr.hobby[i].checked == true)
             hobbys.push(fr.hobby[i].value);
       }  
       var index = fr.degree.selectedIndex;
       selDegree = fr.degree.options[index].value;
       infor = fr.info.value;
       var msg = "个人信息：\n用户名："+fr.username.value+"\n密码："
         +fr.psw1.value+"\n性别："+sex+"\n爱好："+hobbys.join("、")+"\n专业："+selDegree+"\n个人简介："+infor;
       alert(msg);
     };
};
</script>
</html>